import React, { useState, useEffect } from 'react';
import './style.css';
import { useNavigate } from 'react-router-dom';
import { getWeatherFirst, userLogin as toLogin,getCaptcha } from "../../api";
import { storage } from "../../utils/storage";
import { diva } from '../../global';
const Login = ({ a }) => {
    const ng = useNavigate();
    const [username, setUsername] = useState("");
    const [loading, setLoading] = useState(false);
    const [password, setPassword] = useState("");
    const [captcha,setCaptcha] = useState("");
    const [captchaUrl,setCaptchaUrl] = useState("");
    const [clientId,setClientId] = useState("");
    const [info, setInfo] = useState('');
    const getData = () => {
        storage.saveData('local', '_w', "{\"fxDate\":\"2023-06-22\",\"week\":\"周三\",\"tempMax\":\"27\",\"tempMin\":\"21\",\"textDay\":\"小雨\",\"windDirDay\":\"东北风\",\"weather_icon\":\"http://yyydm-api.yunshangdaomi.com/uploads/adm_images/yu.png\"}");
        getWeatherFirst().then((res) => {
            storage.saveData('local', '_w', res.data.info);

        })
    }
    const CaptchaCreate = ()=>{
        getCaptcha().then((res)=>{
            setCaptchaUrl(res.data.captcha)
            setClientId(res.data.client);
        })
    }
    const getLogin = () => {
        setLoading(true)
        toLogin({ mobile: username, password: password,client:clientId,code:captcha}).then((res) => {
            setLoading(false);
            storage.saveData("local", "_tt", res.data.token)
            ng('/defaultPage');
            onClickEnterBtn();

        }).catch((err) => { setLoading(false); setInfo(err); })
    }
    const onClickEnterBtn = () => {
        diva.client?.request('PlayCameraTrack', {
            name: '进入动画',    // DIVA 编辑器中漫游轨的名称
            loop: false,      // 可选，默认为 false，是否循环播放
            camera: true,     // 可选，默认为 true，是否应用预设的镜头位置
            env: true,        // 可选，默认为 true，是否应用预设的天空后期环境效果
            animation: true   // 可选，默认为 true，是否应用动画效果，注意仅对动画漫游轨中确实存在过渡动画数据的情况有效
        })
    }
    useEffect(() => {
        getData();
        CaptchaCreate();
    }, [])
    return (
        <div className='content-login' style={{ height: '100%' }}>
            <div className="login">
                {loading && (<div className="loading"></div>)}

                <div className="login-box">
                    {/* <Spin> */}
                    <div className="login-detail">
                        <div className="login-title">登录</div>
                        <input placeholder='请输入登录名' value={username} onChange={(e) => setUsername(e.target.value)} />
                        <input placeholder='请输入密码' type="password" value={password}
                            onChange={(e) => setPassword(e.target.value)} />
                        <div>
                            <input placeholder='请输入验证码' className="captcha" value={captcha} onChange={(e) => setCaptcha(e.target.value)} />
                            <img style={{width:'139px',height:'40px',float:'left',paddingTop:'1px',marginLeft:'-1px'}} onClick={() => CaptchaCreate()} src={captchaUrl} alt=''/>
                            <input type="hidden" value={clientId}/>
                        </div>
                        {info && (<div style={{ color: 'red', textAlign: 'left', fontSize: 12 }}>{info}</div>)}

                        <div className='login-button' onClick={() => getLogin()

                        }>登录系统</div>

                    </div>

                    {/* </Spin> */}
                </div>
            </div>
        </div>

    );
};

export default Login;
